<template>
    <span>
        <Button type="info" size="small" @click="handleTaskListShow(client)" icon="ios-list-box-outline" title="测试任务"></Button>
        <Modal v-model="client_tasks_modal" title="设备任务" :width="75" footer-hide>
            <Form :label-width="80">
                <FormItem label="设备ID">
                    <div v-if="clientsBriefData[client_current.client_id]">
                        <div>{{ clientsBriefData[client_current.client_id] }}<span style="font-size: 10px;color:#aaa;margin-left: 5px;">{{ client_current.client_id }}</span></div>
                    </div>
                    <div v-else>{{ client_current.client_id }}</div>
                </FormItem>
                <FormItem v-if="show" label="任务列表">
                    <div style="margin-bottom: 15px;">
                        <div>
                            <TaskAddButton :client="client_current" @success="handleGetClientTasks"></TaskAddButton>
                        </div>
                        <Table :data="client_current.tasks" :columns="task_columns" border >
                            <template #task_type="{row}">
                                <div v-if="row.task_type == 'PING'">
                                    <Tag color="primary">PING</Tag>
                                    {{ row.client_ip }}
                                </div>
                                <div v-else-if="row.task_type == 'TCP'">
                                    <Tag color="warning">TCP</Tag>
                                    {{ row.client_ip }}:{{ row.client_port }}
                                </div>
                            </template>
                            <template #task_enable="{row}">
                                <TaskEnableSwitch :data="row"></TaskEnableSwitch>
                            </template>
                            <template #action="{row}">
                                <TaskEditButton :data="row" @success="handleGetClientTasks" style="margin-right: 5px;"></TaskEditButton>
                                <TaskDeleteButton :data="row" @success="handleGetClientTasks"></TaskDeleteButton>
                            </template>
                        </Table>
                        <p style="color:#aaa;margin-top:5px;">注意：测试任务为对设备进行主动探测，只要有一个任务探测通过，则认为设备处于在线状态</p>
                    </div>
                    <div style="margin-bottom: 15px;">
                        <div>
                            <AlarmPlanAddButton :client="client_current" @success="handleGetClientAlarmPlans"></AlarmPlanAddButton>
                        </div>
                        <Table :data="client_current.alarm_plans" :columns="alarm_plan_columns" border >
                            <template #plan="{row}">
                                <div v-if="row.plan_maxtime > 0">断网超过 {{ row.plan_maxtime }} 秒</div>
                                <div v-if="row.plan_maxcount > 0">{{ row.plan_rangetime }} 秒内连续断网 {{ row.plan_maxcount }} 次</div>
                            </template>
                            <template #plan_time="{row}">
                                <div v-if="row.plan_begintime==''">全天</div>
                                <div v-else>{{ row.plan_begintime }} - {{  row.plan_endtime }}</div>
                            </template>
                            <template #plan_email="{row}">
                                <AlarmPlanEmailSwitch :data="row"></AlarmPlanEmailSwitch>
                            </template>
                            <template #plan_sms="{row}">
                                <AlarmPlanSMSSwitch :data="row"></AlarmPlanSMSSwitch>
                            </template>
                            <template #plan_enable="{row}">
                                <AlarmPlanEnableSwitch :data="row"></AlarmPlanEnableSwitch>
                            </template>
                            <template #action="{row}">
                                <AlarmPlanEditButton :data="row" @success="handleGetClientAlarmPlans" style="margin-right: 5px;"></AlarmPlanEditButton>
                                <AlarmPlanDeleteButton :data="row" @success="handleGetClientAlarmPlans"></AlarmPlanDeleteButton>
                            </template>
                        </Table>
                        <p style="color:#aaa;margin-top:5px;">注意：暂未对接短信接口</p>
                    </div>
                    <div style="margin-bottom: 15px;">
                        <div>
                            <LANIPAddButton :client_id="client_current.client_id" @success="handleGetClientLANIPs" style="margin-right:5px;"></LANIPAddButton>
                            <Button size="small" @click="handleGetClientLANIPs">刷新</Button>
                        </div>
                        <Table :data="client_current.lanips" :columns="lanip_columns" border>
                            <template #lanip_active="{row}">
                                <ActiveDescTableCellValue :active_time="row.lanip_alive_time" :now_time="row.now_time" :default_desc="未上线"></ActiveDescTableCellValue>
                            </template>
                            <template #lanip_enable="{row}">
                                <LANIPEnableSwitch :data="row"></LANIPEnableSwitch>
                            </template>
                            <template #action="{row}">
                                <LANIPEditButton :data="row" @success="handleGetClientLANIPs" style="margin-right: 5px;"></LANIPEditButton>
                                <LANIPDeleteButton :data="row" @success="handleGetClientLANIPs"></LANIPDeleteButton>
                            </template>
                        </Table>
                        <p style="color:#aaa;margin-top:5px;">注意：局域网IP探测依赖于客户端主动上报，未安装客户端此模块无法正常使用</p>
                    </div>
                </FormItem>
            </Form>
        </Modal>
    </span>
</template>

<script>
import { mapGetters } from 'vuex';
import TaskAddButton from './TaskAddButton.vue';
import TaskEditButton from './TaskEditButton.vue';
import TaskDeleteButton from './TaskDeleteButton.vue';
import AlarmPlanAddButton from './AlarmPlanAddButton.vue';
import AlarmPlanEditButton from './AlarmPlanEditButton.vue';
import AlarmPlanDeleteButton from './AlarmPlanDeleteButton.vue';
import TaskEnableSwitch from './TaskEnableSwitch.vue';
import AlarmPlanSMSSwitch from './AlarmPlanSMSSwitch.vue';
import AlarmPlanEmailSwitch from './AlarmPlanEmailSwitch.vue';
import AlarmPlanEnableSwitch from './AlarmPlanEnableSwitch.vue';
import LANIPAddButton from './LANIPAddButton.vue';
import LANIPEditButton from './LANIPEditButton.vue';
import LANIPDeleteButton from './LANIPDeleteButton.vue';
import ActiveDescTableCellValue from './ActiveDescTableCellValue.vue';
import LANIPEnableSwitch from './LANIPEnableSwitch.vue';

export default {
    name: "ClientTaskAndAlarmPlanButton",
    components: { 
        TaskAddButton, 
        TaskEditButton, 
        TaskDeleteButton, 
        TaskEnableSwitch, 
        AlarmPlanAddButton, 
        AlarmPlanEditButton, 
        AlarmPlanDeleteButton, 
        AlarmPlanSMSSwitch,
        AlarmPlanEmailSwitch,
        AlarmPlanEnableSwitch,
        LANIPAddButton,
        LANIPEditButton,
        LANIPDeleteButton,
        ActiveDescTableCellValue,
        LANIPEnableSwitch
    },
    props: {
        client: Object
    },
    data() {
        return {
            show: false,
            client_tasks_modal: false,
            client_current: {
                client_id: "",
                client_name: "",
                client_ip: "",
                client_info: "",
                client_type: "",
                client_alive_time: "",
                tasks: [],
                alarm_plans: [],
                lanips: [],
            },
            task_columns: [
                { title: '任务ID', key: 'task_id', width: 100, align: 'center' },
                { title: '任务名称', key: 'task_name', align: 'center' },
                { title: '任务类型', slot: 'task_type', align: 'center' },
                { title: '任务启用', slot: 'task_enable', width: 100, align: 'center' },
                { title: '操作', slot: 'action', width: 150, align: 'center' }
            ],
            alarm_plan_columns: [
                { title: '计划ID', key: 'plan_id', width: 100, align: 'center' },
                { title: '计划名称', key: 'plan_name', align: 'center' },
                { title: '告警计划', slot: 'plan', align: 'center' },
                { title: '生效时段', slot: 'plan_time', width: 150, align: 'center' },
                { title: '短信通知', slot: 'plan_sms', width: 80, align: 'center' },
                { title: '邮件通知', slot: 'plan_email', width: 80, align: 'center' },
                { title: '是否启用', slot: 'plan_enable', width: 80, align: 'center' },
                { title: '操作', slot: 'action', width: 150, align: 'center' }
            ],
            lanip_columns: [
                { title: 'ID', key: 'lanip_id', width: 100, align: 'center' },
                { title: '局域网设备名称', key: 'lanip_name', align: 'center' },
                { title: '局域网设备地址', key: 'lanip_ip', align: 'center' },
                { title: '局域网设备类型', key: 'lanip_type', align: 'center' },
                { title: '在线状态', slot: 'lanip_active', align: 'center' },
                { title: '是否开启检测', slot: 'lanip_enable', width: 80, align: 'center' },
                { title: '操作', slot: 'action', width: 150, align: 'center' }
            ]
        }
    },
    computed: {
        ...mapGetters(['clientsBriefData', 'getClientBriefValue']),
    },
    methods: {
        async handleTaskListShow(row) {
            this.client_current.client_id = row.client_id;
            this.client_current.client_name = row.client_name;
            this.client_current.client_ip = row.client_ip;
            this.client_current.client_info = row.client_info;
            this.client_current.client_type = row.client_type;
            this.client_current.client_alive_time = row.client_alive_time;
            this.show = false;
            this.client_tasks_modal = true;
            await this.handleGetClientTasks();
            await this.handleGetClientAlarmPlans();
            await this.handleGetClientLANIPs();
            this.show = true;
        },
        async handleGetClientTasks() {
            const res = await this.$http.post('/get_client_tasks', { client_id: this.client_current.client_id })
            let data = res.data;
            data.forEach((item) => {
                item.task_enable = item.task_enable == 1;
            });
            this.client_current.tasks = data;
        },
        async handleGetClientAlarmPlans() {
            const res = await this.$http.post('/get_client_alarm_plans', {client_id: this.client_current.client_id})
            let data = res.data;
            data.forEach(item => {
                item.plan_enable = item.plan_enable == 1; // 将 plan_enable 转换为布尔值
                item.plan_noticetype = item.plan_noticetype || ''; // 如果 plan_noticetype 为空，则设置为空字符串
                item.plan_email = item.plan_noticetype.includes('email'); // 将 plan_email 转换为布尔值
                item.plan_sms = item.plan_noticetype.includes('sms'); // 将 plan_sms 转换为布尔值
                item.plan_time = [item.plan_begintime, item.plan_endtime]; // 将 plan_begintime 和 plan_endtime 转换为数组
            });
            this.client_current.alarm_plans = data;
        },
        async handleGetClientLANIPs() {
            const res = await this.$http.post('/get_client_lanips', {client_id: this.client_current.client_id})
            let data = res.data;
            data.forEach((item) => {
                item.lanip_enable = item.lanip_enable == 1;
                item.now_time = this.$Date().format('YYYY-MM-DD HH:mm:ss');
            });
            this.client_current.lanips = data;
        },
    }
}
</script>